<template>
  <el-dialog
    title="售卡编辑"
    class="gl_dialog_TitleLine gl_dl_footer"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :before-close="cancelDialog"
    width="600px"
  >
    <el-form ref="cardForm" v-loading="loading" class="gl_form_mini" :model="cardForm" :rules="cardForm_rules" style="padding: 0 30px" label-width="100px">
      <el-form-item label="卡种类型">
        <div>{{ chooseChargeType(cardForm.chargeTypeCode) }}</div>
      </el-form-item>
      <el-form-item label="卡种编号">
        <div>{{ cardForm.cardNumber }}</div>
      </el-form-item>
      <el-form-item label="学员">
        <div>{{ cardForm.name }}</div>
      </el-form-item>
      <el-form-item v-if="cardForm.chargeTypeCode === 'ClassPeriod'" prop="remainClassPeriod" label="卡内课时">
        <el-input v-model="cardForm.remainClassPeriod" placeholder="请输入" type="number" size="mini" :min="0" :max="99999" />
      </el-form-item>
      <el-form-item label="有效期" prop="effectiveDate">
        <el-date-picker
          v-model="cardForm.effectiveDate"
          size="mini"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="请选择日期"
          @change="handleTimeChange"
        />
      </el-form-item>
      <el-form-item label="变更原因" prop="updateRemark">
        <el-input v-model="cardForm.updateRemark" placeholder="请输入" maxlength="200" type="textarea" :rows="4" size="mini" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="cancelDialog">取消</el-button>
      <el-button type="primary" size="mini" @click="submit()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import validator from '@/lib/validate/index.js';
import { StudentMembershipCardInput } from '@/lib/form/hall/swaggerForm';
import { api_PUT_ClubStudentCardsIdStudentCard } from '@/extend/api/hallswaggerApi/app';
export default {
  data() {
    return {
      currentId: '',
      dialogVisible: false,
      currentTimeType: '',
      loading: false,
      cardForm: new StudentMembershipCardInput(),
      cardForm_rules: {
        effectiveDate: [{ required: true, message: '有效期时间不能为空', trigger: 'blur' }],
        updateRemark: [{ required: true, message: '变更原因不能为空', trigger: 'blur' }],
        remainClassPeriod: [
          { required: true, message: '卡内课时不能为空', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              callback(validator.checkNumber(value, '请输入正确课时数值'));
            },
            trigger: 'blur'
          }]
      }
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    submit() {
      // 按日期收费
      if (this.cardForm.chargeTypeCode === 'Date') {
        this.cardForm.remainClassPeriod = null;
        if (this.cardForm_rules.remainClassPeriod.indexOf({ required: true, message: '卡内课时不能为空', trigger: 'blur' }) !== -1) {
          this.cardForm_rules.remainClassPeriod.pop({ required: true, message: '卡内课时不能为空', trigger: 'blur' });
        }
      }
      // 按课时收费
      if (this.cardForm.chargeTypeCode === 'ClassPeriod') {
        if (this.cardForm_rules.remainClassPeriod.indexOf({ required: true, message: '卡内课时不能为空', trigger: 'blur' }) === -1) {
          this.cardForm_rules.remainClassPeriod.unshift({ required: true, message: '卡内课时不能为空', trigger: 'blur' });
        }
      }
      this.$refs.cardForm.validate(valid => {
        const that = this;
        if (valid) {
          this.loading = true;
          api_PUT_ClubStudentCardsIdStudentCard(this.currentId, this.cardForm).then(res => {
            this.loading = false;
            this.$message({ type: 'success', message: '修改成功' });
            this.dialogVisible = false;
            this.cardForm = new StudentMembershipCardInput();
            this.$parent.getPageList(that.$parent.selectedMsg.Page);
          }, error => {
            this.loading = false;
            const _msg = error.error.message || error.message;
            this.$message({ type: 'error', message: _msg });
          });
        } else {
          return false;
        }
      });
    },
    // 操作chargeTypeCode
    chooseChargeType(chargeTypeCode) {
      let _chargeType;
      if (chargeTypeCode && this.dict && this.dict.chargeType) {
        _chargeType = this.dict.chargeType.find(item => item.code === chargeTypeCode);
      }
      _chargeType = _chargeType ? _chargeType.value : '';
      return `${_chargeType}`;
    },
    handleTimeChange(time) {
    },
    cancelDialog() {
      this.dialogVisible = false;
      this.currentId = '';
      this.cardForm = new StudentMembershipCardInput();
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
